<template>
    <d2-container class="warning-header">

        <el-card>
            <el-row :gutter="20">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="子系统名称">
                        <el-input v-model="formInline.SysName" placeholder="" style="width:140px">
                        </el-input>
                    </el-form-item>

                    <el-form-item label="子系统类型">
                        <el-select v-model="formInline.SysType" placeholder="所有" style="width:140px">

                            <el-option value="0" label="火灾报警系统"></el-option>
                            <el-option value="10" label="消防联动控制器"></el-option>
                            <el-option value="11" label="消火栓系统"></el-option>
                            <el-option value="12" label="自动喷水灭火系统"></el-option>
                            <el-option value="13" label="气体灭火系统"></el-option>
                            <el-option value="14" label="水喷雾灭火系统(泵启动方式)"></el-option>
                            <el-option value="15" label="水喷雾灭火系统(压力容器启动方式)"></el-option>
                            <el-option value="16" label="泡沫灭火系统"></el-option>
                            <el-option value="17" label="干粉灭火系统"></el-option>
                            <el-option value="18" label="防烟排烟系统"></el-option>
                            <el-option value="19" label="防火门及卷帘系统"></el-option>
                            <el-option value="20" label="消防电梯"></el-option>
                            <el-option value="21" label="消防应急广播"></el-option>
                            <el-option value="22" label="消防电源"></el-option>
                            <el-option value="23" label="消防电话"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="mini" round icon="el-icon-search" @click="onSubmitSearch" type="primary">搜索
                        </el-button>

                        <el-button size="mini" round type="primary" @click="handleNew">
                            创建子系统
                        </el-button>
                    </el-form-item>
                </el-form>
            </el-row>

        </el-card>
        <br/>


        <el-card>
            <el-table
                    :data="tableData.data"
                    :stripe="true"
                    :border="true"
                    tooltip-effect="dark"
                    style="width: 100%">
                <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
                <el-table-column prop="SysName" label="系统名称" align="center">
                </el-table-column>
                <el-table-column prop="ComponentCount" label="部件个数" align="center">
                </el-table-column>
                <el-table-column prop="NormalCount" label="正常个数" align="center">
                </el-table-column>
                <el-table-column prop="AlarmCount" label="报警个数" align="center">
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" width="450">
                    <template slot-scope="scope">
                        <el-button @click="handleClickHis(scope.$index,scope.row)" size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">历史
                        </el-button>

                        <el-button v-if="scope.row.SysAddr != 0" @click="handleClickEdit(scope.$index,scope.row)"
                                   size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">编辑
                        </el-button>
                        <el-button v-if="scope.row.SysAddr != 0" @click="handleClickCompnent(scope.$index,scope.row)"
                                   size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">部件
                        </el-button>

                        <el-button v-if="scope.row.SysAddr != 0" @click="handleDelClick(scope.$index,scope.row)"
                                   size="mini" round
                                   icon="el-icon-edit" align="center" type="primary">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!--分页操作 -->

        <template slot="footer">
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"

                        layout="prev, pager, next, jumper"
                        :total="tableData.total">
                </el-pagination>
            </div>
        </template>
        <!-- 编辑弹出处理页面-->
        <el-dialog
                title="子系统详情"
                :visible.sync="editFormVisible"
                width="70%"
                :before-close="handleClose">
            <el-card>


                <el-form :inline="true" :model="detailData" class="demo-form-inline" ref="detailData">
                    <el-form-item label="用传设备地址" prop="DevAddr">
                        <el-input v-model="detailData.DevAddr" auto-complete="off"></el-input>
                    </el-form-item>

                    <el-form-item label="系统地址" prop="SysAddr">
                        <el-input v-model="detailData.SysAddr" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="子系统类型">
                        <el-select v-model="detailData.SysType" placeholder="所有" style="width:140px">

                            <el-option value="0" label="火灾报警系统"></el-option>
                            <el-option value="10" label="消防联动控制器"></el-option>
                            <el-option value="11" label="消火栓系统"></el-option>
                            <el-option value="12" label="自动喷水灭火系统"></el-option>
                            <el-option value="13" label="气体灭火系统"></el-option>
                            <el-option value="14" label="水喷雾灭火系统(泵启动方式)"></el-option>
                            <el-option value="15" label="水喷雾灭火系统(压力容器启动方式)"></el-option>
                            <el-option value="16" label="泡沫灭火系统"></el-option>
                            <el-option value="17" label="干粉灭火系统"></el-option>
                            <el-option value="18" label="防烟排烟系统"></el-option>
                            <el-option value="19" label="防火门及卷帘系统"></el-option>
                            <el-option value="20" label="消防电梯"></el-option>
                            <el-option value="21" label="消防应急广播"></el-option>
                            <el-option value="22" label="消防电源"></el-option>
                            <el-option value="23" label="消防电话"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="系统名称" prop="SysName">
                        <el-input v-model="detailData.SysName" auto-complete="off"></el-input>
                    </el-form-item>
                </el-form>


            </el-card>
            <br/>


            <span slot="footer" class="dialog-footer">
                    <el-button style="text-align: center" @click="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitNew('detailData')"
                               style="text-align: center">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="子系统历史详情"
                :visible.sync="hisFormVisible"
                width="70%"
                :before-close="handleClose">

            <el-card>
                <el-date-picker
                        v-model="hisTime"
                        @change = 'this.compnentHisDateChange'
                        type="datetime"
                        value-format="yyyy-MM-dd hh:mm:ss"
                        placeholder="选择日期">
                </el-date-picker>
            </el-card>
            <br/>
            <el-card>
                <el-table
                        :data="compnentHisTableData.data"
                        :stripe="true"
                        :border="true"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
                    <el-table-column prop="AreaNo" label="区号" align="center">
                    </el-table-column>
                    <el-table-column prop="SubArea" label="位号" align="center">
                    </el-table-column>
                    <el-table-column prop="Name" label="部件名称" align="center">
                    </el-table-column>
                    <el-table-column prop="ReportTime" label="上报时间" align="center">
                    </el-table-column>
                    <el-table-column prop="ReportType" label="上报类型" align="center">
                    </el-table-column>

                </el-table>
            </el-card>
        </el-dialog>
        <el-dialog
                title="部件详情"
                :visible.sync="componentFormVisible"
                width="70%"
                :before-close="handleClose">

            <el-card>
                <el-form :inline="true" :model="this.componentdetailData" class="demo-form-inline"
                         ref="componentdetailData">
                    <el-form-item label="部件名称" prop="Name">
                        <el-input v-model="componentdetailData.Name" auto-complete="off" style="width:240px" disabled
                                  placeholder="请输入部件名称"> >
                        </el-input>
                    </el-form-item>
                    <el-form-item label="部件位号" prop="SubArea">
                        <el-input v-model="componentdetailData.SubArea" auto-complete="off" style="width:240px" disabled
                                  placeholder="请输入位号"></el-input>

                    </el-form-item>

                    <el-form-item label="部件区号" prop="AreaNo">
                        <el-input v-model="componentdetailData.AreaNo" auto-complete="off" style="width:240px" disabled
                                  placeholder="请输入区号"></el-input>
                    </el-form-item>

                    <el-form-item label="部件类型" prop="ComponentType">
                        <el-select v-model="componentdetailData.ComponentType" placeholder="所有" style="width:240px">
                            <el-option value=0 label="火灾报警系统"></el-option>
                            <el-option value=10 label="消防联动控制器"></el-option>
                            <el-option value=11 label="消火栓系统"></el-option>
                            <el-option value=1 label="其他"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="部件描述" prop="AreaNo">
                        <el-input v-model="componentdetailData.Description" auto-complete="off" style="width:240px"
                                  placeholder="请输入部件描述"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveComData('componentdetailData')" size="mini"
                                   style="margin-left: 70px">保存
                        </el-button>
                        <el-button size="mini" @click="resetForm('componentdetailData')">重置</el-button>
                    </el-form-item>

                </el-form>
            </el-card>
            <br/>
            <el-card>
                <el-table
                        :data="compnentDetailTableData.data"
                        :stripe="true"
                        :border="true"
                        tooltip-effect="dark"
                        style="width: 100%">
                    <el-table-column type="index" label="序号" align="center" width="55"></el-table-column>
                    <el-table-column prop="ProjectName" label="项目名称" align="center">
                    </el-table-column>
                    <el-table-column prop="SysName" label="系统名称" align="center">
                    </el-table-column>
                    <el-table-column prop="AreaNo" label="区号" align="center">
                    </el-table-column>
                    <el-table-column prop="SubArea" label="位号" align="center">
                    </el-table-column>
                    <el-table-column prop="Name" label="部件名称" align="center">
                    </el-table-column>
                    <el-table-column prop="Description" label="部件描述" align="center">
                    </el-table-column>
                    <el-table-column prop="ComponentType" label="部件类型" align="center">
                    </el-table-column>
                    <el-table-column prop="Status" label="部件状态" align="center">
                    </el-table-column>
                    <el-table-column prop="LastUpdateTime" label="最后更新时间" align="center">
                    </el-table-column>
                    <el-table-column label="操作" width="180px" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button @click="editComponentMessage(scope.$index,scope.row)" size="mini" round
                                       icon="el-icon-edit">编辑
                            </el-button>
                            <!--<el-button @click="collectorDelete(scope.$index,scope.row)" size="mini" round-->
                            <!--icon="el-icon-delete" type="danger">删除-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>
            </el-card>
            <br/>
            <div class="block">
                <el-pagination
                        @size-change="handleCompnentSizeChange"
                        @current-change="handleCompnentCurrentChange"
                        :current-page.sync="compnentCurrentPage"

                        layout="prev, pager, next, jumper"
                        :total="compnentDetailTableData.total">
                </el-pagination>
            </div>
        </el-dialog>
    </d2-container>
</template>
<script>

    import {
        getComponentStatu,
        submitComponent,
        getComponentHistory,
        delComponent,
        getComponentTable,
        addIFFSystem
    } from "../../api/data/getComponentStatu/index";
    import formatDate from "../../libs/datetools.js"
    import {mapState} from 'vuex'

    export default {
        mounted() {
            this.handleTable(1, 10, null, null)
            //为data拓展一个原型方法
            Date.prototype.Format = function(fmt)
            { //author: meizz
                var o = {
                    "M+" : this.getMonth()+1,                 //月份
                    "d+" : this.getDate(),                    //日
                    "h+" : this.getHours(),                   //小时
                    "m+" : this.getMinutes(),                 //分
                    "s+" : this.getSeconds(),                 //秒
                    "q+" : Math.floor((this.getMonth()+3)/3), //季度
                    "S"  : this.getMilliseconds()             //毫秒
                };
                if(/(y+)/.test(fmt))
                    fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
                for(var k in o)
                    if(new RegExp("("+ k +")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
                return fmt;
            };
        },
        watch: {
            porjectNode6: function (newnode, oldnode) {
                console.log('projectnode6', newnode)
                //判断 如果是叶子节点 则给项目赋值
                if(newnode.isLeaf){
                    this.project = newnode
                    this.project.ProjectNo = newnode.dataId
                }
                this.handleTable(1, 10, this.project.Id, this.project)
            }
        },
        computed: {
            ...mapState('d2admin/projectSelect', [
                'porjectNode6'
            ])
        },
        data() {
            return {
                IFFSystem:{},
                hisTime: null,
                project: {
                    Id:null,

                },
                currentPage: 1,
                compnentCurrentPage: 1,
                formInline: {
                    SysName: '',
                    SysType: ''
                },
                detailData: {
                    DevAddr: '',
                    SysAddr: '',
                    SysType: '',
                    SysName: '',
                },
                componentdetailData: {
                    Name: '',
                    ComponentType: '0',
                    AreaNo: '',
                    SubArea: '',
                    Description: '',
                },

                tableData: [],
                compnentHisTableData: [],
                compnentDetailTableData: [],
                editFormVisible: false,
                hisFormVisible: false,
                componentFormVisible: false
            }
        },
        methods: {
            handleTable(pageno, pagesize, UserId, data) {
                getComponentStatu(pageno, pagesize, UserId, data).then(res => {
                    this.tableData = res;
                })
            },
            handleComponentTable(pageno, pagesize, SystemId, data) {
                getComponentTable(pageno, pagesize, SystemId, data).then(res => {
                    this.compnentDetailTableData = res;
                })
            },
            handleHisTable(pageno, pagesize, Id, currentTime) {
                getComponentHistory(pageno, pagesize, Id, currentTime).then(res => {
                    this.compnentHisTableData = res;
                })
            },

            handleNew: function (index, row) {
                if (this.project.Id === null) {
                    this.$message({
                        message: '请选择一个项目！',
                        type: 'warning'
                    });
                } else {
                    this.editFormVisible = true;
                }


            },

            handleCompnentSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCompnentCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleComponentTable(val, 10, this.IFFSystem.Id)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.handleTable(val, 10, this.project.Id, this.project)
            },

            handleClickHis: function (index, row) {
                this.hisFormVisible = true
                let date = new Date()
                this.handleHisTable(1, 10, row.Id, date.Format('yyyy-MM-dd hh:mm:ss'))
            },
            compnentHisDateChange(value){
                this.handleHisTable(1, 10, row.Id,value)
            },
            handleClickEdit: function (index, row) {
                this.editFormVisible = true;
                this.detailData = row
            },

            handleClickCompnent: function (index, row) {
                this.componentFormVisible = true
                this.handleComponentTable(1, 10, row.Id)
                this.IFFSystem = row
            },
            handleDelClick: function (index, row) {
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delComponent(row.Id).then(res => {
                        if (res.state === 0) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            //this.handleTable(1, 10, this.project.Id, this.project)
                            this.tableData.data.splice(index,1);
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            onSubmitSearch() {
                this.formInline.ProjectNo = this.project.ProjectNo
                this.project = Object.assign(this.project, this.formInline);
                this.handleTable(1, 10, this.project.Id, this.formInline)
            },
            //新增用传系统
            submitNew(detailData) {
                this.$refs[detailData].validate((valid) => {
                    if (valid) {


                        addIFFSystem(this.detailData, {ProjectNo: this.project.ProjectNo}).then(res => {

                            if (res.state === 0) {
                                this.$message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.editFormVisible = false
                                this.handleTable(1, 10, null, this.project)
                                this.$refs[detailData].resetFields();
                            }
                        })

                    } else {
                        this.$message({
                            message: '提交失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });
            },
            // 保存部件按钮
            saveComData(componentdetailData) {
                this.$refs[componentdetailData].validate((valid) => {
                    if (valid) {
                        submitComponent(this.componentdetailData, {SystemId: this.IFFSystem.Id}).then(res => {

                            if (res.state === 0) {
                                this.$message({
                                    message: '提交成功！',
                                    type: 'success'
                                });
                                this.editFormVisible = false
                                this.handleTable(1, 10, null, this.project)
                                this.$refs[componentdetailData].resetFields();
                            }
                        })
                        //刷新
                        this.handleComponentTable(1, 10,this.IFFSystem.Id)
                    } else {
                        console.log('提交失败！');
                        return false;
                    }
                });
            },
            editComponentMessage: function (index, data) {
                console.log(data)
                data.ComponentType = data.ComponentType +''
                this.componentdetailData = data
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        }
    }
</script>
<style>
    .warning-header .d2-container-full__header {
        background: gainsboro !important;
    }

    .warning-header .d2-container-full__header {
        background: #1E9FFF !important;

    }

    .el-form-item__content {
        text-align: center;
    }

    .el-button {
        padding: 10px 30px;
        margin-right: 20px;
    }

    .el-form-item__label {
        margin-left: 5px;
    }

    .number1 {
        padding-left: 0px;
    }


</style>

